//创建裁剪框
let $image = $('#image')
//设置配置项
let option = {
    //约束裁剪框的宽高比
    aspectRatio: 1,
    //指定预览区域
    preview: '.img-preview'
}
//生成裁剪框
$image.cropper(option)

//给上传按钮添加点击事件
$('button:contains("上")').on('click', function () {
    // console.log(123);
    $('#file').trigger('click')
})

//给文件上传添加文件域内容改变事件
$('#file').on('change', function () {
    // console.log(this.files);
    // console.dir(this)   在控制台中显示指定JavaScript对象的所有属性和属性值
    if (this.files.length > 0) {
        let fileObj = this.files[0]
        // URL是一个内置对象，createObjectURL() 方法，专门为文件对象生成url
        // let url = URL.createObjectURL(文件对象);
        let url = URL.createObjectURL(fileObj)
        // console.log(url);
        // 更换剪裁区的图片 （销毁剪裁框 --> 更换图片 --> 创建剪裁框）
        $image.cropper('destroy').attr('src', url).cropper(option)
    }
})


//给确定按钮添加点击事件，更改图片
$('button:contains("确定")').on('click', function () {
    // console.log(12);
    let canvas = $image.cropper('getCroppedCanvas', { width: 30, height: 30 })
    //把canvas转成base64格式字符串
    let base64 = canvas.toDataURL('image/jpeg', 0.3) //降低清晰度减少体积
    // console.log(base64);
    $.ajax({
        type: 'post',
        url: '/my/user/avatar',
        data: { avatar: base64 },
        success: function (res) {
            // console.log(res);
            layer.msg(res.message)
            if (res.status == 0) {
                // 调用父页面的函数，更新头像
                // parent属性返回当前窗口的父窗口
                window.parent.getUserinfo()
            }
        }
    })
})